<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <style>
        #form {
            width: 400px;
            margin: 0 auto;
            margin-top: 100px;
        }
        
        h1 {
            text-align: center;
        }
        
        input[type='submit'] {
            width: 100%;
        }
    </style>
</head>

<body>
    <form id="form">
        <h1>注册页面</h1>
        <div class="form-group">
            <input type="text" name="username" id="username" class="form-control input-lg" placeholder="用户名" required>
        </div>

        <div class="form-group">
            <input type="password" name="password" id="password" class="form-control input-lg" placeholder="密码" required>
        </div>

        <div class="form-group">
            <input type="text" name="nickname" id="nickname" class="form-control input-lg" placeholder="昵称" required>
        </div>

        <div class="form-group">
            <input type="submit" value="注册新用户" class="btn btn-primary btn-lg">
        </div>
    </form>

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script>
        $(function() {
            $('#form').on('submit', function(e) {
                // 取消表单的默认提交事件
                e.preventDefault()
                $.ajax({
                    url: '/register',
                    data: $('#form').serialize(),
                    type: 'post',
                    success: function(res) {
                        if (res.status !== 200) {
                            return alert(res.msg)
                        }
                        alert(res.msg)
                        location.href = '/login'
                    }
                })
            })
        })
    </script>
</body>

</html>